<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-27 18:48:05
 * @LastEditors: Andy
 * @LastEditTime: 2023-06-28 14:03:25
-->
<template>
    <div>
        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="角色编号" width="150">
                </el-table-column>
                <el-table-column prop="rolename" label="角色名称">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template v-slot="item">
                        <el-button v-if="item.row.status === 1" type="primary" size="small">启用</el-button>
                        <el-button v-else type="danger" size="small">禁用</el-button>
                    </template>

                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="item">
                        <el-button type="primary" size="small" @click="edit(item.row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="del(item.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { successAlert } from '@/utils/alert'
import { roleDel } from '@/request/api'
export default {
    data() {
        return {

        }
    },
    methods: {
        //编辑
        edit(id){
            this.$emit('edit',id)
            // console.log(id);
        },
        ...mapActions({
            requestRole: 'role/listActions'
        }),
        del(id) {
            // console.log(id);
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                roleDel({ id }).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        successAlert(res.msg)
                        //更新列表
                        this.requestRole()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }

    },
    mounted() {
        // 发起菜单列表请求同时渲染数据
        this.requestRole()
    },
    watch: {},
    computed: {
        ...mapGetters({
            tableData: 'role/list'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>